<template>
    <div>
        <Row>
        <Col span="24" style="text-align:left;">
        <span>坐席接听状态:</span>
            <Select  style="width:150px;margin:0 20px 0 6px;" v-model="comingCallStatus">
                <Option v-for="item in comingCallStatusData" :value="item" :key="item">{{item}}</Option>
            </Select>
        <span>通话标识：</span>    
        <Select  style="width:150px;margin:0 5px 0 6px;" v-model="callIdentStatus">
                <Option v-for="item in callIdentStatusData" :value="item" :key="item">{{item}}</Option>
        </Select>
        <Input  placeholder="请输入..." style="width: 180px"></Input>
        </Col>
       </Row>
       <br>
       <Row>
        <Col span="24" style="text-align:left;">
        <RadioGroup v-model="dateBtn" type="button" style="margin-right:20px;">
            <Radio label="今天"></Radio>
            <Radio label="昨天"></Radio>
            <Radio label="一周"></Radio>
            <Radio label="一月"></Radio>
        </RadioGroup>
        <DatePicker  format="yyyy/MM/dd" type="daterange" placement="bottom-end" placeholder="请选择开始日期至结束日期" style="width: 250px;margin-right:10px;" ></DatePicker>
            <Button type="primary" icon="ios-search">搜索</Button>
        </Col>
       </Row>
        <br>
        <Table  highlight-row size="small" :columns="columns1" :data="data1"></Table>
        <Page style="margin-top:20px;" :total="100" size="small" show-elevator show-sizer show-total></Page>
    </div>
</template>
<script>
import record from "service/record.js";
export default {
  name: "outCall",
  data() {
    return {
      comingCallStatusData: ["全部", "客户接听", "客户未接听"],
      callIdentStatusData: ["客户号码", "坐席姓名", "坐席工号","坐席电话","队列号","学生ID"],
      comingCallStatus: "全部",
      callIdentStatus: "客户号码",
      dateBtn:"今天",
      columns1: [
        {
          title: "客户电话",
          key: "customer_tel"
        },
        {
          title: "学生ID",
          key: "student_id"
        },
        {
          title: "IVR",
          key: "IVR_group"
        },
        {
          title: "队列号",
          key: "queue_num"
        },
        {
          title: "队列名",
          key: "queue_name"
        },
        {
          title: "坐席工号",
          key: "agent_num"
        },
        {
          title: "坐席姓名",
          key: "agent_name"
        },
        {
          title: "坐席电话",
          key: "agent_tel"
        },
        {
          title: "开始时间",
          key: "start_time"
        },
        {
          title: "接听状态",
          key: "answer_status"
        },
        {
          title: "客户挂机",
          key: "customer_hangup"
        },
        {
          title: "总时长",
          key: "time_length"
        },
        {
          title: "录音",
          key: "sound_record"
        }
      ],
      data1: [
        {
          customer_tel: "186****1234",
          student_id: "345234",
          IVR_group: "客服组",
          queue_num: "4536728",
          queue_name: "王小孩",
          agent_num: "XXX",
          agent_name: "XXX",
          agent_tel: "XXX",
          start_time: "2017/11/2 10:20:30",
          answer_status: "未接听",
          customer_hangup: "已完结",
          time_length:"20:00",
          sound_record:"xxx"
        },
        {
          customer_tel: "186****1234",
          student_id: "345234",
          IVR_group: "客服组",
          queue_num: "4536728",
          queue_name: "王小孩",
          agent_num: "XXX",
          agent_name: "XXX",
          agent_tel: "XXX",
          start_time: "2017/11/2 10:20:30",
          answer_status: "未接听",
          customer_hangup: "已完结",
          time_length:"20:00",
          sound_record:"xxx"
        },
        {
          customer_tel: "186****1234",
          student_id: "345234",
          IVR_group: "客服组",
          queue_num: "4536728",
          queue_name: "王小孩",
          agent_num: "XXX",
          agent_name: "XXX",
          agent_tel: "XXX",
          start_time: "2017/11/2 10:20:30",
          answer_status: "未接听",
          customer_hangup: "已完结",
          time_length:"20:00",
          sound_record:"xxx"
        },
        {
          customer_tel: "186****1234",
          student_id: "345234",
          IVR_group: "客服组",
          queue_num: "4536728",
          queue_name: "王小孩",
          agent_num: "XXX",
          agent_name: "XXX",
          agent_tel: "XXX",
          start_time: "2017/11/2 10:20:30",
          answer_status: "未接听",
          customer_hangup: "已完结",
          time_length:"20:00",
          sound_record:"xxx"
        },
        {
          customer_tel: "186****1234",
          student_id: "345234",
          IVR_group: "客服组",
          queue_num: "4536728",
          queue_name: "王小孩",
          agent_num: "XXX",
          agent_name: "XXX",
          agent_tel: "XXX",
          start_time: "2017/11/2 10:20:30",
          answer_status: "未接听",
          customer_hangup: "已完结",
          time_length:"20:00",
          sound_record:"xxx"
        }
      ]
    };
  },
  methods: {
    getOutRecord() {
      // this.$Message.info("调用api获取数据");
      //   let data = Object.assign(
      //     this.status

      //   );
      //   let vm = this
      //   record.outRecord(data).then(function(response) {
      //     if (response.state) {
      //       vm..$Message.success({
      //         title: "提示",
      //         content: response.msg
      //       });
      //     } else {
      //       vm.$Modal.warning({
      //         title: "提示",
      //         content: response.msg
      //       });
      //     }
      //   });
    }
  },
  mounted() {
    this.getOutRecord();
  }
};
</script>